<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
            list-style:none;
        }
        #wrap-box{
            margin:100px 150px;
            width:830px;
            height:482px;
            overflow:hidden;
            position:relative;
        }
        ul li{
            float:left;

        }
        #left,#right{
            position:absolute;
            width:40px;
            height:40px;
            top:221px;
            color:white;
            font-size:40px;
            background-color:gray;
            text-align:center;
            line-height:35px;
        }
        #left{
            left:0;
        }
        #right{
            right:0;
        }
        #circle{
            position:absolute;
            bottom:50px;
            left:355px;

        }
        #circle ul li{
            background-color:white;
            border-radius:50%;
            float:left;
            margin-right:20px;
            width:20px;
            height:20px;

        }
        #circle ul li.active{
            background-color:#ff9900;
        }

    </style>
</head>
<body>

<div id="wrap-box">
    <ul>
         <li><img src="img/1.jpg"/></li>
         <li><img src="img/2.jpg"/></li>
        <li><img src="img/3.jpg"/></li>
    </ul>
    <div>
        <span id="left">&lt;</span>
        <span id="right">&gt;</span>
    </div>
    <div id="circle">
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script>
    var index = 0;
  $(function(){
     $("#right").click(function(){
          $("#wrap-box>ul>li").each(function(){
              $(this).hide()
          });
         index++;
         $("#circle>ul>li").each(function(){
             $(this).removeClass("active");
         });
         if(index>$("#wrap-box>ul>li").length-1){
             index=0;
         }
         $("#wrap-box>ul>li").eq(index).show();

         $("#circle>ul>li").eq(index).addClass("active");
         });
      $("#left").click(function(){
          $("#wrap-box>ul>li").each(function(){
              $(this).hide()
          });
          $("#circle>ul>li").each(function(){
              $(this).removeClass("active");
          });
          index--;
          $("#wrap-box>ul>li").eq(index).show();

          if(index<0){
              index=$("#wrap-box>ul>li").length-1;
          }
          $("#circle>ul>li").eq(index).addClass("active");
      })
  })
</script>
</body>
</html>